<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="titleChart">
            <el-form v-loading="loading">
                <div class="sales-title">
                    <span class="tip"></span>
                    <span>结算概况</span>
                </div>
                <el-row class='blance'>
                    <el-col :span="8" class='blanceCon1' :offset='3'>
                        <div class="faraway-left">未结算金额 (元)</div>
                        <el-row class="bigBalance"><span>{{notBalance}}</span></el-row>
                        <el-button @click='blanceClick' :disabled="btnDisabled">结算</el-button>
                    </el-col>
                    <el-col :span="2" class='blanceCon2' :offset='1'></el-col>
                    <el-col :span="6" class='blanceCon1'>
                        <div class="faraway-left">已结算金额 (元)</div>
                        <el-row class="bigBalance"><span>{{hasBalance}}</span></el-row>
                    </el-col>
                </el-row>
                <el-row class="download">
                    <div>
                        <el-button type="text" @click="aboutClick" class="btn-success">关于结算</el-button>
                        <a href="http://test.doc.juziwl.cn/exue/e学云一卡通结算协议（学校）.docx" download="e学云一卡通结算协议（学校）">下载《结算协议》</a>
                    </div>
                    <el-button type="text" @click="bankCard" class="btn-success">查看银行卡信息</el-button>
                </el-row>
            </el-form>
        </div>

        <balance ref="balaRenovate"></balance>

        <el-dialog :visible.sync="dialogVisible1" size="tiny">
            <h3 v-if="status == '-1'" class="tipsText">我们需要补全您的汇款账户信息，并提交审核，审核成功后，才可以使用此功能</h3>
            <h3 v-if="status == '3'" class="tipsText">您的账户已被冻结，暂时无法申请结算。</h3>
            <h3 v-if="status == '1'" class="tipsText">您的账户正在审核中，请耐心等待。</h3>
            <h3 v-if="status == '2'" class="tipsText">您的银行卡未通过审核，请重新填写。</h3>
            <span v-if="status == '2'" class="tipsText">驳回原因：{{reason}}</span>
            <div class="cardCon">
                <p>如有任何疑问，欢迎来电咨询</p>
                <P>橘子股份客服电话：400 600 2588</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="dialogVisible1 = false" v-if="status == '-1' || status == '2'">取消</el-button>
                <el-button  @click="goWrite" type="primary" v-if="status == '-1' || status == '2'">去填写</el-button>
                <el-button  type="primary" @click="dialogVisible1 = false" v-if="status == '1' || status == '3'">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible2" size="tiny" :before-close="handleClose" title="结算">
            <el-form label-width="80px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm">
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="结算区间" prop="endDate"> 
                            <el-col :span="11">
                                <el-date-picker v-model="startDate" :disabled="true" :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" style="width:100%">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="2" align="center">至</el-col>
                            <el-col :span="11">
                                <el-date-picker v-model="endDate" :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2"  @change="dateChange2" style="width:100%">
                                </el-date-picker>
                            </el-col>             
                        </el-form-item>
                    </el-col>
                </el-row> 
                <el-row>
                    <p class="unliquidated">结算金额 <span>{{totalmoney || 0}}</span> 元</P>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="btName">汇款账户</div>
                    </el-col>
                    <el-row class="accountCon">
                        <el-form-item label="开户名：" label-width="90px">
                            {{sAccountName}}
                        </el-form-item>
                        <el-form-item label="所属银行：" label-width="90px">
                            {{fBankId}}
                        </el-form-item>
                        <el-form-item label="账户：" label-width="90px">
                            {{fAccountId}}
                        </el-form-item>
                    </el-row>
                    <el-col :span="18" :offset="3">
                        <div class="cardContent">
                            <p>如需更换账户，还请联系e学云客服400-600-2588</p>
                            <P>我们会在2到3个工作日内结算完毕，节假日顺延</p>
                        </div>
                    </el-col>
                </el-row>          
            </el-form>
            <el-row class="agree">
                <span><el-checkbox v-model="checked"></el-checkbox>同意并遵守<el-button type="text" @click="checkExueYun">《e学云一卡通结算协议》</el-button></span>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeSetel">取消</el-button>
                <el-button type="primary" @click="balanceMoney" :disabled="!checked && totalmoney" :loading="loadingBtn">结算</el-button>
            </div>  
        </el-dialog>
        <agency :agencyDialog="agencyDialog" @closeDialog="closeDialog"></agency>
        <aboutSettle :aboutSettleDialog="aboutSettleDialog" @closeSettleDialog="closeSettleDialog"></aboutSettle>
    </div>
</template>
 
<script>
    import Levelbar from '../layout/Levelbar';
    import balance from './comps/balance';
    import agency from './comps/agency';
    import aboutSettle from './comps/aboutSettle';
    import { mapGetters } from 'vuex';
    import moment from 'moment';
    import {countSettlementMoney, countSettlementMoneyByTime, saveSettlement} from 'api/oneCardSolution'
    export default {
        name: 'presentSettlement',
        components: { Levelbar, balance, agency, aboutSettle},
        data() {
            var validateBalance = (rule, value, callback) => {
                if (this.endDate == '') {
                    callback(new Error('请输入结算结束时间'));
                } else {
                    callback();
                }
            };
            return {
                dialogVisible1: false,
                dialogVisible2: false,
                agencyDialog: false,
                aboutSettleDialog: false,
                btnDisabled: true,
                loadingBtn: false,
                loading: false,
                accountName: '', // 账户名
                resName: '', // 负责人名字
                phone: '',
                totalmoney: '',
                notBalance: '', // 未结算余额
                hasBalance: '', // 已结算余额
                status: '-1', // 状态
                balanceMon: '',
                bankCardId: '', // 银行卡Id
                checked: true,
                reason: '',
                fBankId: '',
                sAccountName: '',
                fAccountId: '',
                ruleForm: {

                },
                startDate: '',
                endDate: '',
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 864e5;
                    }
                },
                rules: {
                    endDate: [
                        { required: true, validator: validateBalance, trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            this.searchSettledAmount();
            // this.getBankCard();
        },
        computed: {
            ...mapGetters([
                'schoolId',
                'schoolName'
            ])
        },
        methods: {
            handleClose(done) {
                this.dialogVisible2 = false;
                this.totalmoney = '';
                this.endDate = '';
            },
            goWrite() {
                this.dialogVisible1 = false;
                this.$router.push({path: '/accountMangement/accountDetail'});   
            },
            searchSettledAmount() {
                this.loading = true;
                this.btnDisabled = true;
                countSettlementMoney(this.schoolId).then(response => {
                    this.hasBalance = response.data.content.settlementMoney;
                    this.notBalance = response.data.content.noSettlementMoney;
                    if (response.data.content.accountStatus=='0') {
                        if (response.data.content.bankCard==null) {
                            this.status = '-1';
                        } else {
                            this.reason = response.data.content.bankCard.sAuditFailure;
                            this.hasRecord = response.data.content.hasRecord;
                            this.status = response.data.content.bankCard.sStatus;
                            this.sAccountName = response.data.content.bankCard.sAccountName;
                            this.fBankId = response.data.content.bankCard.bankName;
                            this.fAccountId = response.data.content.bankCard.fAccountId;
                            this.startDate = moment(response.data.content.endTime).format('YYYY-MM-DD');
                            this.bankCardId = response.data.content.bankCard.pId;
                            this.dateChange1(this.startDate);   
                        }
                    } else {
                        this.status = '3';
                    }
                    this.loading = false;
                    this.btnDisabled = false;
                });
            },
            dateChange1(date) {
                this.pickerOptions2 = {
                    disabledDate(time) {
                        return time.getTime() < new Date(date).getTime() - 864e5 || time.getTime() > Date.now() - 864e5;
                    }
                }
            },
            dateChange2(date) {
                this.searchMoney();
            },
            searchMoney() {
                //console.log(this.startDate, this.endDate)
                let startDate = this.startDate==''?'':moment(this.startDate).format('YYYY-MM-DD');
                let endDate = this.endDate==''?'':moment(this.endDate).format('YYYY-MM-DD');
                
                if (startDate && endDate) {
                    countSettlementMoneyByTime(this.schoolId, startDate, endDate).then(res => {
                        this.totalmoney = res.data.content.noSettlementMoney;
                    })
                }
            },
            // 点击结算弹出框
            blanceClick() {
                if (Number(this.notBalance)==0) {
                    this.$message.error('未结算金额为0.00元，不可结算');
                    return ;
                }
                if (this.status == '0') {
                    if (this.hasRecord == '0') {
                        this.totalmoney = '';
                        this.endDate = '';
                        this.dialogVisible2 = true;
                    } else {
                        this.$message('上次结算申请未结束，暂不能申请结算');
                    }
                } else {
                    this.loadingBtn = false;
                    this.dialogVisible1 = true;
                }
            },
            checkExueYun() {
                this.agencyDialog = true;
            },
            closeDialog() {
                this.agencyDialog = false;
            },
            closeSettleDialog() {
                this.aboutSettleDialog = false;
            },
            closeSetel() {
                this.endDate = '';
                this.totalmoney = '';
                this.dialogVisible2 = false;
            },
            // 点击结算
            balanceMoney() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        if (Number(this.notBalance) < Number(this.totalmoney)) {
                            this.$message.error('结算金额不能超过账户余额');
                            return '';
                        }
                        if (this.totalmoney <= 0) {
                            this.$message.error('结算金额须大于0元');
                            return '';
                        }
                        let startDate = this.startDate==''?'':moment(this.startDate).format('YYYY-MM-DD');
                        let endDate = this.endDate==''?'':moment(this.endDate).format('YYYY-MM-DD');
                        this.loadingBtn = true;
                        saveSettlement(this.schoolId, this.schoolName, startDate, endDate, this.totalmoney, this.bankCardId).then(res => {
                            this.loadingBtn = false;
                            this.$message.success('提交结算成功');
                            this.dialogVisible2 = false;
                            this.endDate = '';
                            this.totalmoney = '';
                            this.searchSettledAmount();
                            this.$refs.balaRenovate.searchFetchData();
                        }).catch(() => {
                            this.loadingBtn = false;
                        })
                    }
                })
            },
            bankCard() {
                this.$router.push({path: '/accountMangement/accountDetail'});  
            },
            aboutClick() {
                this.aboutSettleDialog = true;
            }
        }
}
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
@mixin tip-css {
    display: inline-block;
    height: 12px;
    width: 6px;
    border-left: 3px solid #ff5e2c;
    padding-left: 15px;
}
.app-container{
    position: relative;
    padding: 20px 20px 10px;
    .titleChart{
        background:#fff;
        padding:15px 10px;
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .el-dialog .el-input{
        display:inline-block;
    }
    .el-dialog .cardContent{
        border:none;
        color:#999;
        padding:20px 0 0px 20px;
    }
    .cardCon{
        padding-top:10px;
        border-top:1px solid #e9e9e9;
        margin-top:10px;
        color:#ccc;
        line-height:20px;
    }
    .unliquidated{
        margin-left:80px;
        font-size: 16px;
        color: #666666;
        span{
            color: #ff5e2c;
        }
    }
    .agree{
        padding:20px 0 0 107px;
        .el-checkbox{
            margin-right:7px
        }
    }
    .accountCon{
        border: 1px solid #e9e9e9;
        background: #F2F2F2;
        line-height: 30px;
        padding-left: 3px;
        margin: 15px 0 0 16.5%;
        width: 67%;
    }
    .btName{
        color:#333;
        font-size:14px;
        padding:20px 0 0 10px;
    }
    .blance{
        padding-bottom:20px;
    }
    .blanceCon3{
        color:#999;
        font-size: 14px;
        padding-top:20px !important;
        .el-button{
            width:100px;
        }
        .el-form-item{
            margin-bottom:15px !important;
        }
    }
    .blanceCon2{
        height: 100px;
        border-left: 1px solid #ccc;
        margin-top: 40px;
    }
    .blanceCon1{
        font-family:'微软雅黑';
        font-size: 22px;
        line-height: 30px;
        color: #999999;
        text-align:center;
        color:#999;
        padding-top:36px !important;
        .bigBalance{
            font-family:'微软雅黑';
            font-size:36px;
            color: #343434;
            padding:15px 0 25px 0;
        }
        .el-button{
            width:100px;
        }
    }
}
.sales-title {
    padding-left:10px;
    .tip {
        @include tip-css();
    }
    .current-time {
        padding-right: 8px;
    }
}
.app-content{
    padding:0 25px;
}
.dialog-footer{
    text-align:center !important;
    padding:10px 0 25px 0 !important;
}
.download{
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    padding: 13px 10px 0;
    a{
       color: #37a1fb !important;
        margin-left:30px;  
    }
    div{
        flex: 1;
    }
    
}
.accountCon .el-form-item{
    margin-bottom:0!important;
    word-break: break-all; 
}
.tipsText{
    line-height:30px;
}
.faraway-left{
    padding-left:10px;
}
</style>